<template>
  <div id="box">
    <p>找回专技人才的用户名或密码<span>（重新选择）</span></p>
    <div class="stepBox">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="验证身份"></el-step>
        <el-step title="设置新密码"></el-step>
        <el-step title="重置成功"></el-step>
      </el-steps>
    </div>
    <div class="inpBox">
      <el-input
        placeholder="设置6~20位密码"
        v-model="password"
        @blur="test1()"
      ></el-input>
      <p>{{ passwordTest }}</p>
      <el-input
        placeholder="请再次输入密码"
        v-model="rePassword"
        @blur="test2()"
      ></el-input>
      <p>{{ rePasswordTest }}</p>
    </div>
    <button @click="send()">下一步</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 1,
      password:'',
      passwordTest:'',
      rePassword:'',
      rePasswordTest:''
    };
  },

  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    test1(){
      let reg=/^([a-z0-9\.\@\!\#\$\%\^\&\*\(\)]){6,20}$/i;
      if(this.password==''){
        this.passwordTest='新密码不能为空'
      }else if(!reg.test(this.password)){
        this.passwordTest='请设置6~20位密码'
      }else{
        this.passwordTest=''
      }
    },
    test2(){
      if(this.rePassword==''){
        this.rePasswordTest='密码不能为空'
      }else if(this.rePassword!=this.password){
        this.rePasswordTest='两次密码不一致'
      }else{
        this.rePasswordTest=''
      }
    },
    send(){
      this.test1();
      this.test2();
      if(this.passwordTest==''&&this.rePasswordTest==''){
        this.$axios({
          url:'/staff/changeForgetPassword',
          data:{
            password:this.password,
            password1:this.rePassword
          },
          method:'post'
        }).then((res)=>{
          console.log(res)
        })
      }
    }
  },
  mounted(){
    sessionStorage.setItem('fName','NewPersonal')
  }
};
</script>
<style lang="less" scoped>
#box {
  width: 95%;
  height: 585px;
  border: 1px solid rgb(201, 201, 201);
  margin: 0 auto;
  p {
    margin-top: 30px;
    font-size: 14px;
    span {
      color: rgb(0, 121, 254);
      cursor: pointer;
    }
  }
  .stepBox {
    margin-top: 20px;
    margin-bottom: 40px;
    /deep/.el-step__icon {
      background: rgb(0, 121, 254);
      border: none;
      color: #fff;
    }
    /deep/.el-step__title {
      font-size: 14px;
    }
  }
  /deep/.el-input {
    width: 195px;
    height: 28px;
    margin: 20px auto 0;
    display: block;
  }
  .inpBox {
    position: relative;
    p:first-of-type {
      color: red;
      font-size: 14px;
      display: inline;
      position: absolute;
      top: -20px;
      left: 60%;
    }
    p:nth-of-type(2) {
      color: red;
      font-size: 14px;
      display: inline;
      position: absolute;
      top: 28px;
      left: 60%;
    }
  }
  button {
    width: 96px;
    height: 40px;
    background: #fff;
    outline: none;
    color: rgb(153, 153, 153);
    border: 1px solid rgb(201, 201, 201);
    margin-top: 70px;
    cursor: pointer;
  }
}
/deep/::-webkit-input-placeholder {
  font-size: 12px;
}
</style>